<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { EditPen, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'

// table-list 搜索
const coalIndex = ref(0)
const searchFormTime = ref()
function clickCoal(index: number) {
    coalIndex.value = index
    postFuelWorkTInventoryAnalysis()
}

//table设置
const tableHeight = ref(0)
const listTableData = ref<any>([])

// 定义表格数据的类型
interface TableRow {
  id: number;
}

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
  // 更新选中项 ID 列表
  selectedRowIds.value = new Set(selection.map((item) => item.id));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
  return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};

const rowInfoClassName = (id:number) => {
    return selectedRowIds.value.has(id) ? 'selected_bg' : '';
}

onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
});

//table样式自定义
const headerCellStyle = {
    padding:'16px 0'
}
const headerRowStyle = {
    backgroundColor: "#CCDDF9",
    color: "#333",
    fontWeight: "bold"
}


//table 保存修改
function tableDataSave() {
    tableDialogVisible.value = true
    
    
}
const tableDialogVisible = ref(false)
function clickTableDialog(){
    tableDialogVisible.value = false
    ElMessage({
        message: '已修改，数据已更新',
        type: 'success',
    })
    //ElMessage.error('修改失败，请重新提交')
}

// 圆仓
const siloDialogVisible = ref(false)
function clickSiloDialog(){

}

// 时间下拉框
const shortcuts = [
    {
        text: '近3天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            return [start, end]
        },
    },
    {
        text: '近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
]

function changeSearchTime(e: any) {
   // StartTime.value = e[0]
    //EndTime.value = e[1]
    //console.log(searchForm.value.searchFormTime)
}
const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    //StartTime.value = ''
    //EndTime.value = ''
    //searchForm.value.searchFormTime = []
    formEl.resetFields()
    postFuelWorkTInventoryAnalysis()
}

import { FuelWorkTInventoryAnalysis, GetAllBunkerData } from "@/api";

// 煤场
const bunkerData = ref<any>([])
const getGetAllBunkerData = () => {
    GetAllBunkerData().then(res=>{
        console.log('BunkerData-------',res.data)
        bunkerData.value = res.data
        coalIndex.value = res.data[0].bunkerId
        postFuelWorkTInventoryAnalysis()
    })
}

const today = new Date();

// 当前时间
const currentDate = today.toISOString().split('T')[0];
const threeDay = new Date(today);
threeDay.setDate(today.getDate() - 3);
const threeDayData = threeDay.toISOString().split('T')[0];


const searchForm = ref<any>({
    searchFormTime: [],
})
searchForm.value.searchFormTime = [threeDayData, currentDate]
const PageNum = ref(1)
const PageSize = ref(10)
const totalPage = ref(0)
//list
const postFuelWorkTInventoryAnalysis = () => {
    FuelWorkTInventoryAnalysis({
        BunkerId: coalIndex.value,
        StartTime: searchForm.value.searchFormTime[0],
        EndTime: searchForm.value.searchFormTime[1],

        PageNum: PageNum.value,
        PageSize: PageSize.value
    }).then(res=>{
        console.log('list-------',res.data)
        listTableData.value = res.data.result
        totalPage.value =  res.data.totalNum
    })
}

onMounted(()=>{
    getGetAllBunkerData()
    
    
})


</script>
<template>
    <!-- 圆仓弹出框 -->
    <el-dialog v-model="siloDialogVisible" title="圆仓" width="1500" :align-center="true">
        <div class="silo_dialog">
            <div class="silo_photo">
                <ul class="info">
                    <li>
                        <span>盘存重量(吨)</span>
                        <p>127157</p>
                    </li>
                    <li>
                        <span>与前次盘煤重量差(吨)</span>
                        <p>+789</p>
                    </li>
                    <li>
                        <span>盘煤时间</span>
                        <p>2023-09-09  10:00:00</p>
                    </li>
                </ul>
                <div class="ph_box">
                    <img class="ph"src="../../assets/img/head.jpg" alt="">
                </div>
                
            </div>
            <div class="silo_info">
                <div class="alert">
                    <img src="../../assets/img/ico_7.png" alt="">
                    <p>提示：点击图片各个煤区，可以查看煤区的详细信息</p>
                </div>
                <div class="table_info">
                    <table>
                        <colgroup>
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                        </colgroup>
                        <tr>
                            <th>煤场名称</th>
                            <td>1#煤场</td>
                            <th>分区名称</th>
                            <td>0°-60°</td>
                        </tr>
                        <tr>
                            <th>盘煤时间</th>
                            <td>2023-09-09 10:00:01</td>
                            <th>登记人</th>
                            <td>王小丫</td>
                        </tr>
                    </table>
                    <h3>存煤明细</h3>
                    <table>
                        <colgroup>
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                        </colgroup>
                        <tr>
                            <th>品名</th>
                            <th>所属煤种</th>
                            <th>堆体重量</th>
                            <th>堆体体积</th>
                        </tr>
                        <tr>
                            <td><a href="#" class="table_link" target="_blank">HM-20230909</a></td>
                            <td>褐煤</td>
                            <td>13092</td>
                            <td>13092</td>
                        </tr>
                    </table>
                    <h3>备注</h3>
                    <div class="beiz">
                        <p>1、于2020-09-09  10:00:09产生盘煤记录</p>
                        <p>2、王小丫在2020-09-10  12:33:09产生盘煤记录</p>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog v-model="tableDialogVisible" width="400" :align-center="true" center>
        <div class="table_dialog">
            <img src="../../assets/img/ico_5.png" alt="">
            <strong>您确定要保存修改内容吗？</strong>
            <span>
                修改内容保存后不可撤回，且会覆盖之前数据
            </span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tableDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickTableDialog">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="record_search">
        <div class="name">所属煤场:</div>
        <ul class="record_search_tab">
            <li v-for="(item, index) in bunkerData" :class="coalIndex == item.bunkerId ? 'hover' : ''" @click="clickCoal(item.bunkerId)">
                {{ item.bunkerName }}
            </li>
        </ul>
        <div class="record_search_time">
            <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline" label-width="75">
                <el-form-item label="盘煤时间:" prop="searchFormTime">
                    <el-date-picker style="width: 240px;" v-model="searchForm.searchFormTime" 
                    type="daterange" 
                    value-format="YYYY-MM-DD" 
                    :shortcuts="shortcuts" 
                    unlink-panels 
                    start-placeholder="开始时间"
                    end-placeholder="结束时间" 
                    @change="changeSearchTime" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" color="#2565C8" @click="postFuelWorkTInventoryAnalysis">搜索</el-button>
                    <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                        <el-icon size="20">
                            <Refresh />
                        </el-icon>
                    </el-button>
                </el-form-item>
            </el-form>
            
        </div>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" >盈亏初始化设置</el-button>
            <el-button type="primary" color="#2565C8" >导出</el-button>
        </div>
        <div class="table_list mt15">
            <el-table
                :data="listTableData" 
                size="large" 
                :border="false" 
                :stripe="false" 
                :highlight-current-row="false"
                :height="tableHeight"
                :header-cell-style="headerCellStyle"
                style="width: 100%;" 
                :row-class-name="rowClassName"
                ref="multipleTableRef"
                @selection-change="handleSelectionChange">
                
                <el-table-column type="selection" width="50" align="right" />
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="table_list_info" :class="rowInfoClassName(props.row.id)">
                            <div class="table_info">
                                <table>
                                    <tr>
                                        <th>与前次盘煤重量差</th>
                                        <th>与前次账面重量差</th>
                                        <th>盈亏重量</th>
                                        <th>盈亏比例</th>
                                        <th>差异原因及对策</th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <p v-if="props.row.differenceOfCoalWeight > 0" class="red ico_p">{{ props.row.differenceOfCoalWeight }} <img src="../../assets/img/ico_red_up.png" alt=""></p>
                                            <p v-else class="">{{ props.row.differenceOfCoalWeight }}</p>
                                        </td>
                                        <td>
                                            <p v-if="props.row.differenceOfNoteWeight > 0" class="green ico_p">{{ props.row.differenceOfNoteWeight }} <img src="../../assets/img/ico_red_up.png" alt=""></p>
                                            <p v-else class="">{{ props.row.differenceOfNoteWeight }}</p>
                                        </td>
                                        <td>{{ props.row.weightOffset }}</td>
                                        <td>{{ props.row.benefitRate }}</td>
                                        <td>{{ props.row.remark }}</td>
                                    </tr>
                                </table>
                            </div>
                            <!-- <div class="info_table">
                                <el-table :data="props.row.info" :border="true" :header-cell-style="headerRowStyle" style="width: 100%">
                                    <el-table-column align="center" label="与前次盘煤相比" prop="name">
                                        <el-table-column align="center" label="堆煤" prop="infoName1" />
                                        <el-table-column align="center" label="取煤" prop="infoName2" />
                                        <el-table-column align="center" label="变化值" prop="infoName3" />
                                    </el-table-column>
                                    <el-table-column align="center" label="盘存文件" prop="infoName4" />
                                </el-table>
                            </div> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="煤场名称" prop="bunkerName" />
                <el-table-column label="盘煤时间" prop="executeTime" />
                <el-table-column label="盘煤重量(吨）" prop="coalWeight" />
                <el-table-column label="账面重量(吨）" prop="noteWeight" />
                <el-table-column label="入厂皮带秤重量" prop="factoryScaleWeight" />
                <el-table-column label="入炉皮带秤重量" prop="furnaceScaleWeight" />
                <el-table-column label="盈亏状态" prop="weightOffset" >
                    <template #default="props">
                        <span v-if="props.row.weightOffset>0">盘盈</span>
                        <span v-else>盘亏</span>
                    </template>
                </el-table-column>
                
            </el-table>
        </div>

        <div class="pagination">
            <el-pagination v-model:current-page="PageNum" v-model:page-size="PageSize" @current-change="postFuelWorkTInventoryAnalysis" :total="totalPage"  background layout="prev, pager, next" />
        </div>

    </div>


</template>
<style>
.record_search_time .el-form-item{
    margin-bottom: 0;
}
</style>
<style scoped lang="scss">
::v-deep(.el-table__body-wrapper){
    background: #F6FAFE !important;
}
::v-deep(.el-table__inner-wrapper:before){
    display: none; //下边线
}
::v-deep(.el-table thead th) {
  color: #333 !important;
  background: #CCDDF9;
}
::v-deep(.el-table__body){
    border-spacing: 0px 13px !important;
}
::v-deep(.el-table__row td){
    border-top:1px solid #E0E5ED !important;
    border-bottom:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:first-child){
    border-left:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:last-child){
    border-right:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row:hover td){
    background: #ecf5ff!important;
}
::v-deep(.el-table__expanded-cell){
    border:1px solid #E0E5ED !important;
    padding:0 !important;
    //border-top: none !important; 
}
// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
  background-color: #ecf5ff !important;
}
::v-deep(.el-table__row.selected-row td){
    background: #FFDE9A !important;
}
</style>